<template>
  <div id="app">
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="30" type="flex" align="middle">
        <el-col :span="6" class="col-flex">
          <div>工单编号</div>
          <el-input placeholder="请输入内容" class="input-with-select">
          </el-input>
        </el-col>
        <el-col :span="6" class="col-flex">
          <div>工单状态</div>
          <el-select v-model="list.taskCode" placeholder="请选择">
            <el-option label="取消" value="3"></el-option>
          </el-select>
        </el-col>
        <el-col :span="10" class="button col-flex">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 列表区域 -->
    <el-card class="infoList"
      ><div class="header">
        <el-button start class="left" @click="addFn">新增</el-button>
      </div>
      <div class="body">
        <Table
          :info.sync="info"
          :list="list"
          :dialogVisible.sync="dialogVisible"
        ></Table>
      </div>
      <el-pagination
        @size-change="taskList"
        @current-change="taskList"
        :page-sizes="[10, 15, 20, 30]"
        :current-page.sync="params.pageIndex"
        :page-size.sync="params.pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 详情区域对话框 -->
    <ArticleDialog
      :info="info"
      :dialogVisible.sync="dialogVisible"
    ></ArticleDialog>
    <!-- <el-dialog
      title="工单详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-descriptions :column="2">
        <el-descriptions-item label="设备编号">{{
          this.xqList.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{
          this.xqList.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="取消日期">{{
          this.xqList.updateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="运营人员">{{
          this.xqList.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="工单类型">{{
          this.xqList.taskType.typeName
        }}</el-descriptions-item>
        <el-descriptions-item label="补货数量"
          ><a>补货详情</a>
        </el-descriptions-item>
        <el-descriptions-item label="工单方式">{{
          this.xqList.taskType.type
        }}</el-descriptions-item>
        <el-descriptions-item label="取消原因">无</el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 新增工单对话框 -->
    <DialogAdd :visible.sync="visible"></DialogAdd>
    <!-- <el-dialog title="新增工单" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="addform">
        <el-form-item label="设备编号" :label-width="formLabelWidth">
          <el-input v-model="addform.innerCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工单类型" :label-width="formLabelWidth">
          <el-select v-model="addform.productType" placeholder="请选择">
            <el-option label="补货工单" value="补货工单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营人员" :label-width="formLabelWidth">
          <el-input v-model="addform.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="addform.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 分页组件 -->
  </div>
</template>

<script>
import Table from "@/components/table.vue";
import DialogAdd from "./components/dialog-add.vue";
import ArticleDialog from "./components/article-dialog.vue";
import { taskList } from "@/api/task";
export default {
  name: "DikedePcIndex",
  components: {
    Table,
    DialogAdd,
    ArticleDialog,
  },
  data() {
    return {
      formInline: {},
      list: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: true,
      },
      totalCount: 0,
      tableData: [],
      visible: false,
      addform: {},
      dialogVisible: false,
      id: "",
      info: {},
    };
  },

  created() {
    this.taskList();
  },

  methods: {
    async taskList() {
      const res = await taskList(this.params);
      this.list = res.data.currentPageRecords;
      this.totalCount = +res.data.totalCount;
      // console.log(this.list);
    },
    addFn() {
      this.visible = true;
    },
    onSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
#app {
  ::deep .el-dialog__body {
    margin-top: 30px;
  }
  ::deep .el-descriptions {
    padding-left: 50px;
  }
  ::deep .el-descriptions-item__container {
    margin-bottom: 8px;
  }
  .col-flex {
    display: flex;
    align-items: center;
    .input-with-select {
      width: 200px;
    }
  }
  .xiala {
    width: 100%;
  }
  .el-input__inner {
    background-color: #f7f5f5;
  }
  .formButton {
    display: flex;
    justify-content: center;
    .formButtonItem {
      width: 170px;
      height: 40px;
      line-height: 20px;
      text-align: center;
    }
  }
  ::deep .el-drawer__body {
    padding: 25px;
  }

  .infoList {
    text-align: center;
  }
  ::deep .cell {
    text-align: center;
  }
  .header {
    display: flex;
    justify-content: start;
    margin-bottom: 10px;
    .left {
      border: none;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      color: #fff;
    }
    .right {
      border: none;
      background-color: #fbf4f0 !important;
    }
  }
  .fyq {
    overflow: hidden;
  }
  .el-pagination {
    text-align: center;
    margin-top: 25px;
  }
  .infoList {
    margin-top: 25px;
  }
  .el-breadcrumb {
    margin-bottom: 30px;
  }
  .el-row {
    display: flex;
    align-items: center;
  }
}
</style>
